.pages {
  height: 100%;
  overflow: auto;
  .item {
    display: inline-block;
    height: 100%;
    width: 100%;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    .name {
      position: absolute;
      padding: 5px 10px;
      color: var(--theme-text-hover);
      z-index: 100;
      bottom: 0;
      width: 100%;
      left: 0;
      text-align: center;
      background-color: var(--theme-input-text);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .more {
      position: absolute;
      z-index: 100;
      top: 10px;
      right: 10px;
      background-color: var(--theme-input-text);
      color: var(--theme-text-hover);
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      border-radius: 100px;
      transition: 0.3s;
      &:hover {
        background-color: var(--theme-text);
      }
    }
  }

  .active {
    border: 4px solid var(--theme-main);
    background-size: cover;
  }
  .btns {
    text-align: center;
    margin: 20px;
  }
}

.itemMenus {
  font-size: 14px;
  padding: 5px 0;
  width: 60px;
  li {
    text-align: center;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--theme-text);
    &:hover {
      background-color: var(--theme-text-hover);
      color: var(--theme-text2);
    }
  }
}
